<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>播客详情 - 深度对话</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="app-container h-full">
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
      <div class="status-left">
        <span class="status-time">00:00</span>
      </div>
      <div class="status-right">
        <i class="ri-signal-wifi-fill"></i>
        <i class="ri-battery-fill"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-header">
      <button class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 click-target" aria-label="返回" onclick="history.back()">
        <i class="ri-arrow-left-s-line"></i>
      </button>
      <span class="page-title">播客详情</span>
      <button class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 click-target" aria-label="分享">
        <i class="ri-share-line"></i>
      </button>
    </div>
    
    <!-- 页面内容 -->
    <div class="main-content pb-36">
      <!-- 播客封面和信息 -->
      <div class="bg-gradient-to-b from-indigo-50 to-white pt-6 pb-8">
        <div class="px-6 flex flex-col items-center">
          <img src="https://images.unsplash.com/photo-1495020689067-958852a7765e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="深度对话" class="w-40 h-40 rounded-xl shadow-lg object-cover">
          
          <h1 class="text-xl font-bold text-center mt-5">深度对话</h1>
          <p class="text-sm text-gray-600 text-center mt-1">李明主持</p>
          
          <div class="flex items-center justify-center mt-3 space-x-2">
            <span class="text-sm bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">4.9 ★</span>
            <span class="text-sm text-gray-500">共96集</span>
            <span class="text-sm text-gray-500">每周更新</span>
          </div>
          
          <div class="flex w-full justify-center space-x-3 mt-6">
            <button class="flex-1 max-w-40 bg-indigo-600 text-white py-2.5 px-4 rounded-full font-medium text-sm flex items-center justify-center click-target" aria-label="收听最新一集">
              <i class="ri-play-fill mr-1.5"></i> 收听最新
            </button>
            <button class="flex-1 max-w-40 border border-gray-300 text-gray-700 py-2.5 px-4 rounded-full font-medium text-sm flex items-center justify-center click-target" aria-label="订阅">
              <i class="ri-add-line mr-1.5"></i> 订阅
            </button>
          </div>
        </div>
      </div>
      
      <!-- 标签栏 -->
      <div class="border-b border-gray-200">
        <div class="flex px-4">
          <button class="py-3 px-4 border-b-2 border-indigo-600 text-indigo-600 font-medium text-sm">剧集</button>
          <button class="py-3 px-4 text-gray-500 font-medium text-sm">详情</button>
          <button class="py-3 px-4 text-gray-500 font-medium text-sm">相关推荐</button>
        </div>
      </div>
      
      <!-- 筛选选项 -->
      <div class="px-4 py-3 flex items-center justify-between border-b border-gray-100">
        <div class="flex items-center">
          <span class="text-sm text-gray-500 mr-2">排序:</span>
          <button class="flex items-center text-sm font-medium click-target">
            最新 <i class="ri-arrow-down-s-line ml-1"></i>
          </button>
        </div>
        <button class="flex items-center text-sm text-gray-500 click-target">
          <i class="ri-filter-3-line mr-1"></i> 筛选
        </button>
      </div>
      
      <!-- 剧集列表 -->
      <div class="px-4 divide-y divide-gray-100">
        <!-- 剧集1 -->
        <div class="py-4 click-target" aria-label="播放剧集：「人工智能」AI如何重塑行业未来？" role="button" tabindex="0" onclick="window.location.href='player.html'">
          <div class="flex justify-between items-start">
            <div class="flex-1 pr-4">
              <span class="text-xs font-medium text-indigo-600">2023.10.15</span>
              <h3 class="font-medium text-gray-900 mt-1">「人工智能」AI如何重塑行业未来？</h3>
              <p class="text-sm text-gray-500 mt-1 line-clamp-2">本期节目邀请多位行业专家共同探讨人工智能技术如何影响各行各业的发展前景，以及我们应该如何应对...</p>
              <div class="flex items-center mt-2 text-xs text-gray-500">
                <span>56分钟</span>
                <span class="mx-2">·</span>
                <span>10月15日</span>
              </div>
            </div>
            <div class="flex-shrink-0 relative">
              <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="AI剧集" class="w-16 h-16 rounded-lg object-cover">
              <button class="absolute bottom-0 right-0 w-8 h-8 flex items-center justify-center bg-indigo-600 text-white rounded-full transform translate-x-2 translate-y-2 shadow-lg" aria-label="播放此集">
                <i class="ri-play-fill"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 剧集2 -->
        <div class="py-4 click-target" aria-label="播放剧集：「创新教育」如何培养未来创造力？" role="button" tabindex="0">
          <div class="flex justify-between items-start">
            <div class="flex-1 pr-4">
              <span class="text-xs font-medium text-indigo-600">2023.10.08</span>
              <h3 class="font-medium text-gray-900 mt-1">「创新教育」如何培养未来创造力？</h3>
              <p class="text-sm text-gray-500 mt-1 line-clamp-2">在知识爆炸的时代，传统教育面临挑战。本期节目探讨如何通过创新教育方式，培养孩子的创造力和解决问题的能力...</p>
              <div class="flex items-center mt-2 text-xs text-gray-500">
                <span>48分钟</span>
                <span class="mx-2">·</span>
                <span>10月8日</span>
              </div>
            </div>
            <div class="flex-shrink-0 relative">
              <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="教育剧集" class="w-16 h-16 rounded-lg object-cover">
              <button class="absolute bottom-0 right-0 w-8 h-8 flex items-center justify-center bg-indigo-600 text-white rounded-full transform translate-x-2 translate-y-2 shadow-lg" aria-label="播放此集">
                <i class="ri-play-fill"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 剧集3 -->
        <div class="py-4 click-target" aria-label="播放剧集：「工作与生活」如何在数字时代找到平衡？" role="button" tabindex="0">
          <div class="flex justify-between items-start">
            <div class="flex-1 pr-4">
              <span class="text-xs font-medium text-indigo-600">2023.10.01</span>
              <h3 class="font-medium text-gray-900 mt-1">「工作与生活」如何在数字时代找到平衡？</h3>
              <p class="text-sm text-gray-500 mt-1 line-clamp-2">远程工作、灵活办公正在改变我们的工作方式。本期节目讨论如何在科技高速发展的时代，平衡工作与生活的关系...</p>
              <div class="flex items-center mt-2 text-xs text-gray-500">
                <span>52分钟</span>
                <span class="mx-2">·</span>
                <span>10月1日</span>
              </div>
            </div>
            <div class="flex-shrink-0 relative">
              <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="工作生活剧集" class="w-16 h-16 rounded-lg object-cover">
              <button class="absolute bottom-0 right-0 w-8 h-8 flex items-center justify-center bg-indigo-600 text-white rounded-full transform translate-x-2 translate-y-2 shadow-lg" aria-label="播放此集">
                <i class="ri-play-fill"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 剧集4 -->
        <div class="py-4 click-target" aria-label="播放剧集：「医疗革新」科技如何改变健康服务？" role="button" tabindex="0">
          <div class="flex justify-between items-start">
            <div class="flex-1 pr-4">
              <span class="text-xs font-medium text-indigo-600">2023.09.24</span>
              <h3 class="font-medium text-gray-900 mt-1">「医疗革新」科技如何改变健康服务？</h3>
              <p class="text-sm text-gray-500 mt-1 line-clamp-2">从远程医疗到AI诊断，科技正在改变医疗健康行业。我们邀请医疗专家和企业家讨论这场革命将如何影响我们的生活...</p>
              <div class="flex items-center mt-2 text-xs text-gray-500">
                <span>49分钟</span>
                <span class="mx-2">·</span>
                <span>9月24日</span>
              </div>
            </div>
            <div class="flex-shrink-0 relative">
              <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="医疗剧集" class="w-16 h-16 rounded-lg object-cover">
              <button class="absolute bottom-0 right-0 w-8 h-8 flex items-center justify-center bg-indigo-600 text-white rounded-full transform translate-x-2 translate-y-2 shadow-lg" aria-label="播放此集">
                <i class="ri-play-fill"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 更多剧集 -->
        <div class="py-4 click-target" aria-label="播放剧集：「可持续发展」绿色经济的机遇与挑战" role="button" tabindex="0">
          <div class="flex justify-between items-start">
            <div class="flex-1 pr-4">
              <span class="text-xs font-medium text-indigo-600">2023.09.17</span>
              <h3 class="font-medium text-gray-900 mt-1">「可持续发展」绿色经济的机遇与挑战</h3>
              <p class="text-sm text-gray-500 mt-1 line-clamp-2">气候变化与环境问题日益严峻，绿色经济成为未来发展方向。本期节目探讨企业、政府如何共同推动可持续发展...</p>
              <div class="flex items-center mt-2 text-xs text-gray-500">
                <span>61分钟</span>
                <span class="mx-2">·</span>
                <span>9月17日</span>
              </div>
            </div>
            <div class="flex-shrink-0 relative">
              <img src="https://images.unsplash.com/photo-1470115636492-6d2b56f9146d?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="可持续发展剧集" class="w-16 h-16 rounded-lg object-cover">
              <button class="absolute bottom-0 right-0 w-8 h-8 flex items-center justify-center bg-indigo-600 text-white rounded-full transform translate-x-2 translate-y-2 shadow-lg" aria-label="播放此集">
                <i class="ri-play-fill"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 加载更多 -->
      <div class="text-center py-6">
        <button class="px-6 py-2 border border-gray-300 rounded-full text-sm text-gray-700 font-medium click-target">加载更多</button>
      </div>
    </div>
    
    <!-- 迷你播放器 -->
    <div class="mini-player">
      <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="当前播放：AI如何重塑行业未来？" class="player-artwork">
      <div class="player-info">
        <h4 class="player-title">AI如何重塑行业未来？</h4>
        <p class="player-author">深度对话</p>
      </div>
      <div class="player-controls">
        <button aria-label="上一集" class="text-gray-600">
          <i class="ri-skip-back-fill text-xl"></i>
        </button>
        <button aria-label="暂停" class="text-gray-800">
          <i class="ri-pause-fill text-2xl"></i>
        </button>
        <button aria-label="下一集" class="text-gray-600">
          <i class="ri-skip-forward-fill text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="tab-bar">
      <div class="tab-item" data-page="home.html">
        <i class="ri-home-5-line tab-icon"></i>
        <span class="tab-text">首页</span>
      </div>
      <div class="tab-item" data-page="discover.html">
        <i class="ri-compass-line tab-icon"></i>
        <span class="tab-text">探索</span>
      </div>
      <div class="tab-item" data-page="library.html">
        <i class="ri-folder-music-line tab-icon"></i>
        <span class="tab-text">收藏</span>
      </div>
      <div class="tab-item" data-page="profile.html">
        <i class="ri-user-line tab-icon"></i>
        <span class="tab-text">我的</span>
      </div>
    </div>
  </div>
  
  <script src="components.js"></script>
</body>
</html> 
